import React from "react";
import { login } from "../services/user";
import { useNavigate } from "react-router-dom";
import { Form, Button, Input, Modal, Card, Row, Col } from "antd";
export default function Login() {
  let style = { width: "400px", height: "500px", margin: "auto" };
  let navigate = useNavigate();
  const onFinish = async (values) => {
    console.log("Success:", values);
    let data = await login({ username: values.username, pwd: values.password });

    console.log("data", data);
    if (data.status == 2) {
      Modal.success({
        content: "登录成功！",

        onOk: () => {
          navigate("/manage");
          localStorage.token = data.token;
        },
      });
    } else {
      alert("账户密码错误");
    }
  };

  const handleReg = (data) => {
    navigate('/reg');
  }
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <Card title="登录" style={{
      width: 600, margin: "auto",
      textAlign: "center",
      border: "1px solid #dcdcdc",
      borderRadius: "10px",
      fontSize: "60px",
      marginTop: "50px"
    }}>
      <Form
        name="basic"
        labelCol={{
          span: 5,
        }}
        wrapperCol={{
          span: 16,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          name="username"
          label="账户："
          hasFeedback
          rules={[
            {
              pattern: new RegExp(/^.{6,12}$/),
              message: "账户格式不正确",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="password"
          label="密码："
          rules={[
            {
              pattern: new RegExp(/^.{6,12}$/),
              message: "密码格式不正确",
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
        >
          {/* <Button type="primary" htmlType="submit">
            登录
          </Button> */}
          <Row>
            <Col span={4} offset={12}>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Col>
            <Col span={2} offset={1}>
              <Button type="" onClick={handleReg}>
                注册
              </Button>
            </Col>
          </Row>
        </Form.Item>
      </Form>
    </Card>
  );
}
